<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';

const store = useStore();

// 轮播图
store.dispatch('home/updeteHomeBanner');
const homeBanner = computed(() => store.state.home.homeBanner);
// 新鲜好物
store.dispatch('home/getHomeNewe');
const homeNewe = computed(() => store.state.home.homeNewe);

// 人气推荐
store.dispatch('home/getHomeHot');
const homeHot = computed(() => store.state.home.homeHot);

// 全部分类
store.dispatch('home/updateHomeCategoryHead');
const homeCategory = computed(() => store.state.home.homeCategoryHead);

// 部分分类
store.dispatch('home/updateHomeGoods');
const homeGoods = computed(() => store.state.home.homeGoods);

// 最新专题
store.dispatch('home/updateHomeSpecial');
const homeSpecial = computed(() => store.state.home.homeSpecial);

</script>

<template>
  <div class="big">
    <!-- 首页轮播图 -->
    <div class="main-slideshow">
      <el-carousel :interval="3000" v-if="homeBanner.length > 0">
        <el-carousel-item v-for="item in homeBanner" :key="item.id">
          <img :src="item.imgUrl">
        </el-carousel-item>
        <ul class="slideshow-classify" >
          <li class="classify-item" v-for="item in homeCategory" :key="item.id">
            <img :src="item.imgUrl" class="classify-img">
            <span class="classify-title">{{ item.name }}</span>
            <span v-for="i in item.children.slice(0, 2)" :key="i.id"> {{ i.name }} </span>
            <aside>
              <div class="aside-title">
                <span>分类推荐</span>
                <span>根据您的购买记录或浏览记录推荐</span>
              </div>
              <!-- 浏览记录 -->
              <div class="classify-history">
                <div v-for="h in item.goods" :key="h.id" class="history-list">
                  <div class="classify-history-img">
                    <img :src="h.picture">
                  </div>
                  <div class="classify-history-text">
                    <div class="classify-history-title">{{ h.name }}</div>
                    <div class="classify-history-desc">{{ h.desc }}</div>
                    <div class="money">
                      <span class="money-symbol">￥</span>
                      <span class="classify-history-price">{{ h.price }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </aside>
          </li>
        </ul>
      </el-carousel>
    </div>
    <!-- 首页新鲜好物 -->
    <div class="main-good-fresh">
      <div class="good-fresh-title">
        <h3>新鲜好物</h3>
        <span class="small">新鲜出炉 品质靠谱</span>
        <a href="#">
          <span>查看全部</span>
          <ArrowRight class="ArrowRight" />
        </a>
      </div>
      <div class="good-fresh-show">
        <div v-for="h in homeNewe" :key="h.id" class="show">
          <img class="show-img" :src="h.picture">
          <span class="show-title">{{ h.desc }}</span>
          <div class="show-money">￥{{ h.price }}</div>
        </div>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="main-good-fresh">
      <div class="good-fresh-title">
        <h3>人气推荐</h3>
        <span class="small">人气爆款，不容错过</span>
      </div>
      <div class="good-fresh-show">
        <div v-for="hh in homeHot" :key="hh.id" class="show show-popularity">
          <img class="show-img" :src="hh.picture">
          <span class="show-title">{{ hh.title }}</span>
          <div class="show-alt">{{ hh.alt }}</div>
        </div>
      </div>
    </div>
    <!-- 居家 美食 服饰 母婴 -->
    <div class="main-all-goods" v-for="g in homeGoods" :key="g.id">
      <div class="all-goods-title">
        <div class="title">
          <h3>{{ g.name }}</h3>
          <div class="classify">
            <span v-for="hg in g.children" :key="hg.id">
              {{ hg.name }}
            </span>
          </div>
        </div>
        <a href="#">
          <span>查看全部</span>
          <ArrowRight class="ArrowRight" />
        </a>
      </div>
      <div class="all-goods-show">
        <!-- 长图 -->
        <div class="goods-log">
          <img :src="g.picture" class="log">
          <div class="log-saleInfo">
            <div class="saleInfo-name">{{ g.name }}馆</div>
            <div class="saleInfo">{{ g.saleInfo }}</div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="goods-show">
          <div class="show-img" v-for="gg in g.goods" :key="gg.id">
            <img :src="gg.picture" class="img">
            <div class="name">{{ gg.name }}</div>
            <span class="desc">{{ gg.desc }}</span>
            <div class="money">￥{{ gg.price }}</div>
            <div class="hz">
              <a href="#">
                <h5>找相似</h5>
              </a>
              <a href="#">
                <h6>发现更多宝贝</h6>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 最新专题 -->
    <div class="topic-wrapper">
      <div class="main-new-topic">
        <!-- 标题区 -->
        <div class="new-topic-title">
          <h3>最新专题</h3>
          <a href="#">
            <span>查看全部
              <ArrowRight class="ArrowRight" />
            </span>
          </a>
        </div>
        <!-- 图片区 -->
        <div class="new-topic-show">
          <div v-for="s in homeSpecial" :key="s.id" class="show">
            <div class="show-img">
              <img :src="s.detailsUrl">
              <span class="show-title">{{ s.title }}</span>
              <div class="show-summary">{{ s.summary }}</div>
              <div class="show-money">￥{{ s.lowestPrice }}起</div>
              <div class="floor-shadow" />
            </div>
            <div class="like-comment-visual">
              <div class="like">
                <icon name="like" class="like-icon" color="#adaca9" />
                <span>
                  {{ s.collectNum }}
                </span>
              </div>
              <div class="comment">
                <icon name="keshi" class="comment-icon" color="#adaca9" />
                <span>
                  {{ s.viewNum }}
                </span>
              </div>
              <div class="visual">
                <icon name="duanxin" class="visual-icon" color="#adaca9" />
                <span>
                  {{ s.replyNum }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .big {
    background-color: #fff;
    // 首页轮播图
    .main-slideshow {
      width: 100%;
      height: 500px;
      background-color: #f5f5f5;
      margin: 0 auto;
      :deep(.el-carousel__container) {
        position: relative;
        width: 1240px;
        height: 500px;
        margin: 0 auto;
        .slideshow-classify {
          width: 250px;
          height: 500px;
          background-color: #666666;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 0;
          position: absolute;
          top: 0;
          left: 0;
          li {
            width: 100%;
            height: 100%;
            list-style: none;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              margin-right: 8px;
              font-size: 14px;
            }
            aside {
              position: absolute;
              width: 990px;
              height: 500px;
              top: 0;
              left: 250px;
              display: none;
              background-color: rgba(255, 255, 255, 0.8);
              .aside-title {
                width: 100%;
                height: 50px;
                display: flex;
                align-items: baseline;
                line-height: 50px;
                color: #666666;
                padding-left: 20px;
                margin: 12px 0;
                & :first-child {
                  font-size: 20px;
                }
              }
              .classify-history {
                padding-left: 20px;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
                grid-gap: 16px;
                margin-top: 28px;
                .history-list {
                  background-color: #fff;
                  display: flex;
                  padding: 8px;
                  border-radius: 4px;
                  outline: 1px solid #eee;
                  &:hover {
                    background-color: #e3f9f4;
                  }
                }
                .classify-history-img {
                  width: 100px;
                  height: 100px;
                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                }
                .classify-history-text {
                  flex: 1;
                  margin-left: 8px;
                  position: relative;
                  .classify-history-title {
                    color: #666666;
                  }
                  .classify-history-desc {
                    margin-top: 8px;
                    color: #999999;
                    font-size: 14px;
                    @include overflow(1);
                  }
                  .money {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    .money-symbol {
                      font-size: 18px;
                      color: #cf4444;
                    }
                    .classify-history-price {
                      color: #cf4444;
                      font-size: 24px;
                      margin-left: -10px;
                    }
                  }
                }
              }
            }
          }
          & :hover aside {
            display: block;
          }
          .classify-item:hover {
            background-color: #27ba9b;
            cursor: pointer;
          }
        }
      }
      :deep(.el-carousel__arrow--left) {
        width: 50px;
        height: 50px;
        font-size: 30px;
        left: 260px;
      }
      :deep(.el-carousel__arrow--right) {
        width: 50px;
        height: 50px;
        font-size: 30px;
      }
      :deep(.el-carousel__button) {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
    }
    // 首页新鲜好物 人气推荐
    .main-good-fresh {
      width: 1240px;
      height: 540px;
      margin: 0 auto;

      // 标题区
      .good-fresh-title {
        width: 100%;
        height: 115px;
        line-height: 115px;
        display: flex;
        position: relative;

        h3 {
          font-size: 32px;
          font-weight: 400;
          margin-left: 6px;
        }

        .small {
          line-height: 132px;
          color: #999999;
          margin-left: 12px;
        }

        a {
          text-decoration: none;
          position: absolute;
          right: 0;
          line-height: 132px;
          color: #999999;
          display: flex;

          &:hover {
            color: #27ba9b;
          }

          .ArrowRight {
            width: 14px;
            height: 14px;
            margin-top: 60px;
            margin-left: 4px;
          }
        }
      }

      // 图片区
      .good-fresh-show {
        width: 100%;
        height: 423px;
        display: flex;
        justify-content: space-between;
        text-align: center;

        .show {
          flex: 1;
          height: 406px;
          margin-right: 8px;
          background-color: #f0f9f4;
          transition: all .3s linear;

          &:last-child {
            margin-right: 0;
          }

          .show-img {
            width: 100%;
            height: 306px;
          }

          .show-title {
            font-size: 22px;
            padding: 0 30px;
            width: 100%;
            @include overflow(1);
            margin-top: 8px;
          }

          .show-money {
            color: #cf4444;
            font-size: 22px;
            padding: 12px 30px 0 30px;
          }

          .show-alt {
            color: #999999;
            margin-top: 12px;
          }
        }
        .show-popularity {
          background-color: #fff;
        }

        .show:hover {
          transform: translate3d(0,-3px,0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
      }
    }
    // 居家
    .main-all-goods {
      width: 1240px;
      height: 725px;
      margin: 0 auto;

      // 标题区
      .all-goods-title {
        width: 100%;
        height: 115px;
        line-height: 115px;
        display: flex;
        position: relative;
        .title {
          display: flex;
          width: 80%;
          h3 {
            flex: 1;
            font-size: 32px;
            font-weight: 400;
            margin-left: 6px;
          }
          div {
            flex: 1;
            text-align: right;
            span {
              padding: 0 16px;
            }
            & :hover {
              background-color: #27ba9b;
              color: #fff;
              border-radius: 4px;
              cursor: pointer;
            }
          }
        }


        a {
          text-decoration: none;
          position: absolute;
          right: 0;
          line-height: 114px;
          color: #999999;
          display: flex;

          &:hover {
            color: #27ba9b;
          }

          .ArrowRight {
            width: 14px;
            height: 14px;
            margin-top: 50px;
            margin-left: 4px;
          }
        }
      }
      // 图片区
      .all-goods-show {
        display: flex;
        width: 100%;
        height: 610px;
        .goods-log {
          width: 240px;
          height: 100%;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .log-saleInfo {
            width: 188px;
            height: 66px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            display: flex;
            .saleInfo-name {
              width: 76px;
              height: 66px;
              text-align: center;
              line-height: 66px;
              color: #fff;
              background: rgba(0, 0, 0, .9);
            }
            .saleInfo {
              flex: 1;
              height: 66px;
              text-align: center;
              line-height: 66px;
              color: #fff;
              background: rgba(0,0,0,.7);
            }
          }
        }
        .goods-show {
          flex: 1;
          display: grid;
          text-align: center;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-gap: 12px;
          margin-left: 12px;
          .show-img {
            width: 100%;
            height: 100%;
            padding: 10px 30px;
            position: relative;
            overflow: hidden;
            outline: transparent;
            transition: all 1s linear;
            &:hover {
              outline: 1px solid #27ba9b;
              cursor: pointer;
            }
            .img {
              width: 160px;
              height: 160px;
              object-fit: cover;
            }
            .name {
              text-align: left;
              margin-left: 8px;
              @include overflow(2);
            }
            .desc {
              width: 70%;
              @include overflow(1);
              color: #666666;
              margin-top: 4px;
              position: absolute;
              text-align: left;
              top: 220px;
              left: 40px;
            }
            .money {
              color: #cf4444;
              font-size: 22px;
              position: absolute;
              text-align: left;
              bottom: 16px;
              left: 40px;
            }
            .hz {
              position: absolute;
              bottom: -83px;;
              left: 0;
              width: 240px;
              height: 84px;
              background-color: #27ba9b;
              transition: all .5s;
              text-align: center;
              padding-top: 19px;
              a {
                color: #fff;
                text-decoration: none;
                font-size: 22px;
                h5 {
                  font-weight: 400;
                  &::after {
                    content: "";
                    display: block;
                    width: 125px;
                    height: 1px;
                    background-color: #fff;
                    margin: 7px 0 8px 54px;
                  }
                }
                h6 {
                  font-weight: 400;
                }
              }
            }
            &:hover .hz {
              transition-delay: .2s;
              transform: translateY(-83px);
            }
          }
        }
      }
    }
    // 最新专题
    .topic-wrapper {
      width: 100%;
      height: 500px;
      background-color: #eee;
      min-width: 1240px;
      .main-new-topic {
        // 标题区
        width: 1240px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
        .new-topic-title {
          display: flex;
          width: 100%;
          height: 115px;
          justify-content: center;
          align-items: center;
          h3 {
            flex: 1;
            font-size: 32px;
            font-weight: 400;
            margin-left: 6px;
          }
          a {
            width: 82px;
            text-decoration: none;
            color: #999999;
            span {
              display: flex;
              align-items: center;
              .ArrowRight {
                width: 14px;
                height: 14px;
              }
            }
          }
        }
        // 图片区
        .new-topic-show {
          flex: 1;
          width: 100%;
          display: flex;
          background-color: #eee;
          padding-bottom: 8px;
          .show {
            flex: 1;
            height: 100%;
            margin-right:12px;
            display: flex;
            flex-direction: column;
            transition: all .3s linear;
            &:hover {
              transform: translate3d(0, -3px, 0);
              box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
            }

            &:last-child {
              margin-right: 0;
            }
            .show-img {
              width: 100%;
              height: 288px;
              position: relative;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
              span {
                width: 70%;
                color: #fff;
                font-size: 22px;
                position: absolute;
                bottom: 32px;
                left: 8px;
                @include overflow(1);
                z-index: 100;
              }
              .show-summary {
                width: 70%;
                // 文字阴影
                text-shadow: 0 0 3px #333;
                color: #999;
                position: absolute;
                bottom: 8px;
                left: 8px;
                @include overflow(1);
                z-index: 100;
              }
              .show-money {
                color: #cf4444;
                height: 26px;
                background-color: #fff;
                position: absolute;
                bottom: 16px;
                right: 8px;
                padding: 0 8px;
                z-index: 100;
              }
              .floor-shadow {
                position: absolute;
                left: 0px;
                bottom: 0px;
                width: 100%;
                height: 288px;
                background-image: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 30%);
                z-index: 99;
              }
            }
            // 点赞 浏览 评论
            .like-comment-visual {
              flex: 1;
              display: flex;
              padding: 0 8px;
              background-color: #fff;
              .like {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                .like-icon {
                  width: 18px;
                  height: 18px;
                  margin-right: 4px;
                }
              }
              .comment {
                flex: 4;
                display: flex;
                align-items: center;
                margin-left: 8px;
                .comment-icon {
                  width: 22px;
                  height: 22px;
                  margin-right: 4px;
                }
              }
              .visual {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 8px;
                .visual-icon {
                  width: 20px;
                  height: 20px;
                  margin-right: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
